<template>
  <div class="info-container">
    <div class="info-logo">
      <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2579313585,1854004294&fm=27&gp=0.jpg" />
    </div>
    <div class="name">Serati Ma</div>
    <div class="motto">Hannah is full of rivers, tolerance is great</div>
    <div class="detail">
      <div class="detail-item">
        <i class="iconfont iconic_social_data_normal"></i>
        <span>交互专家</span>
      </div>
      <div class="detail-item">
        <i class="iconfont iconlanmu"></i>
        <span>某某某事业群－某某平台部－某某技术部－UED</span>
      </div>
      <div class="detail-item">
        <i class="iconfont iconic_social_dynamic_normal"></i>
        <span>浙江省杭州市</span>
      </div>
    </div>
    <div class="label">
      <div>标签</div>
      <br />
      <el-tag>很有想法的</el-tag>
      <el-tag>专注设计</el-tag>
      <el-tag>帅的一批</el-tag>
      <el-tag>海纳百川</el-tag>
      <el-tag>无可挑剔</el-tag>
      <el-tag>AJ</el-tag>
      <el-tag>anymore</el-tag>
    </div>
    <div style="margin-left:25px;">团队</div>
    <div class="group">
      <div class="group-item">
          <img class="group-logo" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png">
          <span class="group-name">react团队</span>
      </div>
       <div class="group-item">
          <img class="group-logo" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png">
          <span class="group-name">angular团队</span>
      </div>
       <div class="group-item">
          <img class="group-logo" src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png">
          <span class="group-name">bootstrap 团队</span>
      </div>
       <div class="group-item">
          <img class="group-logo" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png">
          <span class="group-name">首席设计</span>
      </div>
       <div class="group-item">
          <img class="group-logo" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png">
          <span class="group-name">蚂蚁金服</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.info-container {
  flex: 2;
  height: 850px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
  .info-logo {
    text-align: center;
    padding-top: 25px;
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
  }
  .name {
    font-size: 24px;
    margin: 15px 0;
    text-align: center;
  }
  .motto {
    font-size: 14px;
    text-align: center;
  }
  .detail {
    display: flex;
    flex-direction: column;
    margin: 25px;
    font-size: 12px;
    color: #999;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    .detail-item {
      margin: 10px 0;
    }
  }
  .label {
    margin: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    .el-tag {
      margin: 5px 0;
    }
  }
  .group{
    margin: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .group-item{
        width: 50%;
        height: 50px;
        margin: 10px 0;
        .group-logo{
            width: 40px;
            height: 40px;
            border-radius: 20px;
            display: inline-block;
        }
        .group-name{
            line-height: 50px;
            display: inline-block;
            position: relative;
            top: -18px;
            left: 20px;
            font-size: 14px;
        }
    }
  }
}
</style>
